<template>
    <div id="app">
        <!-- 面包屑 -->
        <div id="breadcrumb_box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>库存管理</el-breadcrumb-item>
                <el-breadcrumb-item to='/outbound_manage'>出库管理</el-breadcrumb-item>
                <el-breadcrumb-item><span id="current">新增出库单</span></el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-card>
            <el-row>
                <el-col :span="19">
                    <span style="font-size: 15px; color: #2c9678; font-weight: 700;">
                        出库单信息
                    </span>
                </el-col>
                <el-col :span="3">
                    <el-button icon="el-icon-plus" id="add" @click="open_add_dialog()" v-if="boundstate">
                        新增货物
                    </el-button>
                </el-col>
                <el-col :span="2">
                    <el-button icon="el-icon-check" id="submit" @click="submit_new_outbound()" v-if="boundstate">
                        提交
                    </el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <span style="font-size: 15px">
                        所出仓库：
                    </span>
                    <el-select v-model="outbound.warehouseName" placeholder="请选择" style="width: 200px"
                        v-if="boundstate">
                        <el-option v-for="item in warehouseList" :key="item.warehouseId" :label="item.warehouseName"
                            :value="item.warehouseName" @click.native="get_goodsList(item.warehouseId)">
                        </el-option>
                    </el-select>
                    <el-input v-model="outbound.warehouseName" style="width: 200px" disabled v-if="!boundstate">
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <span style="font-size: 15px">
                        经办人：
                    </span>
                    <el-input v-model="outbound.realName" style="width: 200px" disabled>
                    </el-input>
                </el-col>
                <el-col :span="7">
                    <span style="font-size: 15px">
                        出库时间：
                    </span>
                    <el-date-picker v-model="outbound.time" type="datetime" placeholder="选择日期时间" style="width: 200px"
                        :disabled="!boundstate">
                    </el-date-picker>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <span style="font-size: 15px">
                        去处：
                    </span>
                    <el-input v-model="outbound.source" placeholder="请输入..." style="width: 230px"
                        :disabled="!boundstate">
                    </el-input>
                </el-col>
                <el-col :span="1"><span style="font-size: 15px">
                        备注：
                    </span></el-col>
                <el-col :span="15">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="outbound.remark"
                        :disabled="!boundstate">
                    </el-input>
                </el-col>
            </el-row>
        </el-card>

        <!-- 表格区域 -->
        <el-card>
            <div id="list">
                <el-table border stripe :header-cell-style="tableHeaderCellStyle" :cell-style="tableCellStyle"
                    tooltip-effect="dark" :data="showList.slice((currentPage - 1) * pageSize, currentPage * pageSize)">
                    <el-table-column :label="item.propName" :property="item.prop" v-for="item in tableColumnList"
                        :key="item.prop" align="center">
                    </el-table-column>
                    <el-table-column prop="operate" label="操作" align="center" v-if="boundstate">
                        <template v-slot="scope">
                            <el-button type="danger" size="small" icon="el-icon-delete" circle
                                @click="delete_outbound_goods(scope.row)">
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <!-- 分页页码 -->
        <div id="page_box">
            <el-pagination :current-page="currentPage" @current-change="handleCurrentChange"
                layout="total, prev, pager, next, jumper" :total="total" :page-size="pageSize" background
                hide-on-single-page>
            </el-pagination>
        </div>

        <!-- 弹窗 -->
        <el-dialog title="添加出库货物" :visible.sync="add_outbound_goods_dialog">
            <div id="list2">
                <el-table border stripe height="250" :header-cell-style="tableHeaderCellStyle"
                    :cell-style="tableCellStyle" tooltip-effect="dark" :data="goodsList">
                    <el-table-column :label="item.propName" :property="item.prop" v-for="item in tableColumnList2"
                        :key="item.prop" align="center">
                    </el-table-column>
                </el-table>
            </div>
            <el-row>
                <el-col :span="2">
                    <div id="interval"></div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="2">
                    <div id="interval"></div>
                </el-col>
                <el-col :span="8">
                    <span style="font-size: 15px">货物id: </span>
                    <el-select v-model="inventory.goodsId" placeholder="请先选择仓库" style="width: 150px">
                        <el-option v-for="item in goodsList" :key="item.goodsId" :label="item.goodsId"
                            :value="item.goodsId" @click.native="getGoods(item)">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="10">
                    <span style="font-size: 15px">数量: </span>
                    <el-input style="width:150px" v-model="inventory.number" @keyup.enter.native="add_outbound_goods()">
                    </el-input>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" id="submit" @click="add_outbound_goods()">确 定</el-button>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script src="../../assets/js/admin/outbound_order_detail.js">
</script>

<style scoped src="../../assets/css/admin/manage.css">
</style>